<template>
  <div>
   <h2>物流相关信息</h2>
   <div class="logistics-info-header" v-if="list.length > 0">
     <div class="logistics-info-header-left">
       <div :class="list[0].classAttr">{{ list[0].time }}</div>
       <div class="logistics-company">{{ item.logisticsCompany}}</div>
       <div class="logistics-no">{{ item.logisticsNo }}</div>
     </div>
   </div>
   <ul class="logistics-info-list">
     <li v-for="(item,index) in item.logisticsInfo" :key="index">
       <div class="logistics-info-list-time">{{ item.time }}</div>
       <div class="logistics-info-list-content">{{ item.content}}</div>
     </li>
   </ul>
    <button v-check="item">查看物流详情</button>
  </div>
</template>
<script>
export default {
props:['item'],

directives:{
check:{
 inserted(el,binding){
   el.addEventListener("click",function(){
     if(binding.value.role=="admin"||binding.value.role=="zhangsan"||binding.value.role=="lisi"){
       alert("已发货")
     }else{
       alert("未发货")
     }
   })
 }
}
},

data(){
 return{
   list:[]
 }
},
created(){
 let init=this.item.logisticsStatus;
 console.log(init);
 
  switch (init) {
   case 0:
     this.list.push({ time: "未发货", classAttr: "blue logistics-status" });
     break;
   case 1:
     this.list.push({ time: "已发货", classAttr: "undo logistics-status" });
     break;
   case 2:
     this.list.push({ time: "已签收", classAttr: "error logistics-status" });
     break;
   case 3:
     this.list.push({ time: "未签收", classAttr: "right logistics-status" });
     break;
   default:
     console.log(12);
 }
}
}
</script>

<style scoped>
.blue {
color: blue;
}
.undo {
color: #ccc;
}
.error {
color: red;
}
.right {
color: green;
}
</style>